Skip to content

[Frontend] Guild Role Badge Components#317

Open
armorbreak001 wants to merge 1 commit intoGalactiGuild:mainfrom
armorbreak001:bounty/276-guild-role-badges
Open

[Frontend] Guild Role Badge Components#317
armorbreak001 wants to merge 1 commit intoGalactiGuild:mainfrom
armorbreak001:bounty/276-guild-role-badges

Conversation

@armorbreak001
Copy link
Copy Markdown

Fixes #276

What was done

  • Created RoleBadge component in src/components/guild/RoleBadge.tsx
  • Three role variants with distinct styling:
    • admin — gold/amber glow + Shield icon (Lucide)
    • auditor — cyan styling + Eye icon
    • member — neutral slate style + User icon
  • Fully responsive: text labels hide on small screens (sm:) via sr-only pattern, showing only icons
  • Uses existing cn() utility matching project conventions (no cva dependency needed)
  • Added Storybook-style showcase demo (RoleBadge.showcase.tsx) with team member list context

How to verify

  1. Open frontend/src/components/guild/RoleBadge.showcase.tsx in your browser
  2. Verify all three badges render with correct colors and icons
  3. Resize browser below 640px — labels should disappear, only icons remain
  4. Check the simulated team member list for contextual usage

- Add RoleBadge component for owner/admin/moderator/auditor/member roles
- Each role has unique color, icon, and styling (gold admin, cyan auditor, etc.)
- Uses Lucide icons: Crown (owner), Shield (admin/mod), Eye (auditor), User (member)
- Size variants: sm, md, lg
- Hides text label on very small screens (icon-only on mobile)
- Responsive and accessible with title attributes
@armorbreak001 armorbreak001 force-pushed the bounty/276-guild-role-badges branch from 01400b0 to 33e96bf Compare April 14, 2026 13:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Frontend] Guild Role Badge Components

1 participant